<script setup lang="ts">
import { onMounted, ref } from "vue";
import { ElMessage, ElMessageBox, ElTooltip, ElSelect, ElOption, ElForm, ElFormItem, ElInput } from "element-plus";
import { useRouter } from "vue-router";
import { takeoffToPoint, editAirport } from "#/api/daping/airport";

// import { useVbenForm, z } from "#/adapter/form";
const getImageUrl = (name: string) => {
  return new URL(`../../../../../assets/${name}`, import.meta.url).href;
};
const props = defineProps({
  weatherData: Object,
  cabinData: Object,
  airportData: Object,
});
const emit = defineEmits(["changeView"]);
const router = useRouter();

let to_fly_loading = ref(false)
const flighttask = {
  '0': '作业准备中',
  '1': '飞行作业中',
  '2': '作业后状态恢复',
  '3': '自定义飞行区更新中',
  '4': '地形障碍物更新中',
  '5': '任务空闲',
  '255': '飞行器异常',
  '256': '未知状态'
};
const form = ref({
  safeExitAltitude: "",
  flightOperationAltitude: "",
  returnAltitude: "",
  missingAction: '2',
})
const formRef = ref()
const to_fly = async () => {
  // router.push({
  //   name: 'AirportTakeover',
  //   state: {
  //     id: props.airportData.id
  //   }
  // });
  // return;
  // console.log(formApi.getValues())
  // formApi.getValues().then((e) => {
  if (!formRef.value) return
  await formRef.value.validate((valid, fields) => {
    if (valid) {
      // console.log('submit!')
      let e = form.value
      if (Number(e.safeExitAltitude)) {
        if (Number(e.safeExitAltitude) > 120 || Number(e.safeExitAltitude) < 20) {
          ElMessage({
            message: '安全离场高必须在20 ~ 120之间',
            type: 'warning',
          })
          return false;
        }
      } else {
        ElMessage({
          message: '请填写正确安全离场高',
          type: 'warning',
        })
        return false;
      }
      if (Number(e.flightOperationAltitude)) {
        if (Number(e.flightOperationAltitude) > 120 || Number(e.flightOperationAltitude) < 20) {
          ElMessage({
            message: '飞行作业高必须在20 ~ 120之间',
            type: 'warning',
          })
          return false;
        }
      } else {
        ElMessage({
          message: '请填写正确飞行作业高',
          type: 'warning',
        })
        return false;
      }
      if (Number(e.returnAltitude)) {
        if (Number(e.returnAltitude) > 120 || Number(e.returnAltitude) < 20) {
          ElMessage({
            message: '返航高必须在20 ~ 120之间',
            type: 'warning',
          })
          return false;
        }
      } else {
        ElMessage({
          message: '请填写正确返航高',
          type: 'warning',
        })
        return false;
      }
      if (props.airportData.modeCode == 4) {
        if (props.airportData.flighttaskStepCode == 0) {
          ElMessage({
            message: '作业准备中，请稍后再试',
            type: 'warning',
          })
          return false;
        }
        if (props.airportData.flighttaskStepCode == 2) {
          ElMessage({
            message: '作业恢复中，请稍后',
            type: 'warning',
          })
          return false;
        }
      }
      let data = {
        id: props.airportData.id,
        flightOperationAltitude: e.flightOperationAltitude,
        missingAction: e.missingAction,
        returnAltitude: e.returnAltitude,
        safeExitAltitude: e.safeExitAltitude,
      }
      ElMessageBox.confirm(
        '确认起飞？',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }
      ).then(async () => {
        try {
          to_fly_loading.value = true
          let rew = await editAirport(data)
          // let rew = {
          //   code: 200,
          // }
          if (rew.code == 200) {
            let e = await takeoffToPoint({ id: props.airportData.id });
            // let e = {
            //   code: 200,
            //   data: {
            //     errorCode: 0
            //   }
            // }
            to_fly_loading.value = false
            if (e.code == 200) {
              if (localStorage.getItem('jcbsYjqfOperation')) {
                localStorage.removeItem('jcbsYjqfOperation');
              }
              if (e.data.errorCode == 0) {
                router.push({
                  name: 'AirportTakeover',
                  state: {
                    id: props.airportData.id
                  }
                });
              } else if (e.data.errorCode == 4) {
                ElMessageBox.confirm(
                  '检测到无人机(' + flighttask[e.data.flighttaskStepCode] + '),是否跳转到无人机画面',
                  {
                    confirmButtonText: '跳转',
                    cancelButtonText: '取消',
                  }
                ).then(() => {
                  router.push({
                    name: 'AirportTakeover',
                    state: {
                      id: props.airportData.id
                    }
                  });
                }).catch(() => {
                })
              } else {
                ElMessage.error(e.data.message);
              }
            } else {
              ElMessage.error(e.msg);
            }
          } else {
            ElMessage.error(rew.msg);
          }
        } catch (err) {
          console.log(err)
          ElMessage.error('加载数据失败');
        }
      }).catch(() => {
      })
    } else {
      // console.log('error submit!', fields)
    }
  })
  // })
};
// const form_item = [
//   {
//     component: "Input",
//     fieldName: "safeExitAltitude",
//     label: "安全离场高（ALT ）",
//     suffix: () => "m",
//     // rules: z.number().default(100).min(20, { message: '请输入大于或等于0的数字' }).max(120, { message: '请输入小于或等于100的数字' }).required(),
//   },
//   {
//     component: "Input",
//     fieldName: "flightOperationAltitude",
//     label: "飞行作业高（ALT ）",
//     suffix: () => "m",
//     // rules: z.number().default(100).min(20, { message: '请输入大于或等于0的数字' }).max(120, { message: '请输入小于或等于100的数字' }).required(),
//   },
//   {
//     component: "Input",
//     fieldName: "returnAltitude",
//     label: "返航高（ALT ）",
//     suffix: () => "m",
//     // rules: z.number().default(100).min(20, { message: '请输入大于或等于0的数字' }).max(120, { message: '请输入小于或等于100的数字' }).required(),
//   },

//   {
//     component: "Select",
//     fieldName: "missingAction",
//     label: "失联动作",
//     componentProps: {
//       // filterable: true,
//       options: [
//         // { value: "0", label: "悬停" },
//         // { value: "1", label: "着陆(降落)" },
//         { value: "2", label: "返航" },
//       ],
//     },
//   },
// ];
// const [Form, formApi] = useVbenForm({
//   commonConfig: {
//     // 所有表单项
//     componentProps: {
//       class: "w-full",
//     },
//   },
//   // layout: 'horizontal',
//   // handleSubmit: (values) => {
//   //   ElMessage.success(`表单数据：${JSON.stringify(values)}`);
//   // },
//   schema: form_item,
// });
// formApi.setFieldValue('safeExitAltitude', props.airportData.safeExitAltitude)
// watch(() => props.airportData, (a, b) => {
//   if (a.safeExitAltitude) {
//     // console.log(formApi.getValues)
//   }
// })
const numberBlur = () => {
  const numbers = form.value.safeExitAltitude.match(/\d+/g);
  form.value.safeExitAltitude = numbers ? parseInt(numbers.join(''), 10).toString() : '';
}
const numberBlur1 = () => {
  const numbers = form.value.flightOperationAltitude.match(/\d+/g);
  form.value.flightOperationAltitude = numbers ? parseInt(numbers.join(''), 10).toString() : '';
}
const numberBlur2 = () => {
  const numbers = form.value.returnAltitude.match(/\d+/g);
  form.value.returnAltitude = numbers ? parseInt(numbers.join(''), 10).toString() : '';
}
const customValidator = (rule, value) => {
  if (Number(value) < 20 || Number(value) > 120) {
    return new Error('数值必须在20~120之间');
  }
  return true;
};
const rules = ref({
  safeExitAltitude: [
    { required: true, message: '请填写安全离场高', trigger: 'blur' },
    { validator: customValidator, trigger: 'blur' },
  ],
  flightOperationAltitude: [
    { required: true, message: '请填写飞行作业高', trigger: 'blur' },
    { validator: customValidator, trigger: 'blur' },
  ],
  returnAltitude: [
    { required: true, message: '请填写返航高', trigger: 'blur' },
    { validator: customValidator, trigger: 'blur' },
  ],
})
onMounted(() => {
  // console.log(props.airportData)
  form.value.safeExitAltitude = props.airportData.safeExitAltitude
  form.value.flightOperationAltitude = props.airportData.flightOperationAltitude
  form.value.returnAltitude = props.airportData.returnAltitude
  form.value.missingAction = '2'
  // for (let i of form_item) {
  //   if (i.fieldName == "missingAction") {
  //     formApi.setFieldValue(
  //       i.fieldName,
  //       // props.airportData[i.fieldName].toString()
  //       // 2025年9月4日09:43:47 需求修改
  //       '2'
  //     );
  //   } else {
  //     formApi.setFieldValue(i.fieldName, props.airportData[i.fieldName]);
  //   }
  // }
});
</script>
<template>
  <div class="air-message">
    <div class="air-message-k">
      <div style="width: 25%; margin-left: 0.5vh" class="air-message-item">
        <div class="corner-lb"></div>
        <div class="corner-rb"></div>
        <h3 class="control-management-title">
          天气情况
          <img class="icon" src="../../../../../assets/leftbg10.png" alt="" />
        </h3>
        <div class="air-weather">
          <p class="air-tem">{{ airportData.environmentTemperature }}℃</p>
          <p class="air-add"> {{ airportData.address }}</p>
          <div class="air-detail">
            <div class="air-del">
              <img class="air-icon" :src="getImageUrl('airport_icon_kongqishidu.png')" alt="" />
              <div class="air-del-content">
                <p class="air-title">{{ airportData.humidity }}%</p>
                <span class="air-type">湿度</span>
              </div>
            </div>
            <div class="air-del">
              <img class="air-icon" :src="getImageUrl('airport_icon_yaokongxinhao.png')" alt="" />
              <div class="air-del-content">
                <p class="air-title">{{ airportData.rainfall }}mm</p>
                <span class="air-type">降雨量</span>
              </div>
            </div>
            <div class="air-del">
              <img class="air-icon" :src="getImageUrl('airport_icon_gugouzhuwu.png')" alt="" />
              <div class="air-del-content">
                <p class="air-title">{{ airportData.windDirection }}</p>
                <span class="air-type">风向</span>
              </div>
            </div>
            <div class="air-del">
              <img class="air-icon" :src="getImageUrl('airport_icon_fengsu.png')" alt="" />
              <div class="air-del-content">
                <p class="air-title">{{ airportData.windSpeed }}级</p>
                <span class="air-type">风速</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: calc(32% - 0.5vh); margin-left: 0.5vh" class="air-message-item">
        <div class="corner-lb"></div>
        <div class="corner-rb"></div>
        <h3 class="control-management-title">
          机舱状态
          <img class="icon" src="../../../../../assets/leftbg10.png" alt="" />
        </h3>
        <div class="air-cabin">
          <div class="air-cabin-left">
            <p class="name">
              <ElTooltip class="box-item" raw-content effect="dark" :disabled="airportData.airportName.length < 8"
                placement="top">
                <template #content>
                  <div style="width: 10vw;">{{ airportData.airportName }}</div>
                </template>
                <div class="span">{{ airportData.airportName }}</div>
              </ElTooltip>
            </p>
            <div class="status">
              <!-- {{ airportData.status == 1 ? '在线' : airportData.status }} -->
              <template v-if="airportData.modeCode == 0">设备空闲中</template>
              <template v-if="airportData.modeCode == 1">现场调试</template>
              <template v-if="airportData.modeCode == 2">远程调试</template>
              <template v-if="airportData.modeCode == 3">固件升级中</template>
              <template v-if="airportData.modeCode == 4">
                <!-- 作业中 -->
                <template v-if="airportData.flighttaskStepCode == 0">作业准备中</template>
                <template v-if="airportData.flighttaskStepCode == 1">飞行作业中</template>
                <template v-if="airportData.flighttaskStepCode == 2">作业后状态恢复</template>
                <template v-if="airportData.flighttaskStepCode == 3">“自定义飞行区更新中</template>
                <template v-if="airportData.flighttaskStepCode == 4">“地形障碍物更新中</template>
                <template v-if="airportData.flighttaskStepCode == 5">任务空闲</template>
                <template v-if="airportData.flighttaskStepCode == 255">飞行器异常</template>
                <template v-if="airportData.flighttaskStepCode == 256">未知状态</template>
              </template>
              <template v-if="airportData.modeCode == 5">待标定</template>
            </div>
            <div class="img-box">
              <img class="img" :src="airportData.imageUrl
                ? airportData.imageUrl
                : getImageUrl('airport.png')
                " alt="" />
            </div>
            <!-- <div class="address">{{ airportData.description }}</div> -->
          </div>
          <div class="air-cabin-right">
            <div class="air-detail">
              <div class="air-del">
                <img class="air-icon" :src="getImageUrl('airport_icon_cewen.png')" alt="" />
                <div class="air-del-content">
                  <div class="air-title">
                    {{ airportData.temperature }}℃
                  </div>
                  <span class="air-type">机舱温度</span>
                </div>
              </div>
              <div class="air-del">
                <img class="air-icon" :src="getImageUrl('airport_icon_wangluolianjie.png')" alt="" />
                <div class="air-del-content">
                  <div class="air-title">
                    {{ airportData.networkRate }}kb
                  </div>
                  <span class="air-type">网络连接</span>
                </div>
              </div>
              <div class="air-del">
                <img class="air-icon" :src="getImageUrl('airport_icon_yaochongdian.png')" alt="" />
                <div class="air-del-content">
                  <div class="air-title">
                    <!-- {{ airportData.capacityPercent }} -->
                    <!-- {"0":"空闲中""1":"现场调试","2":"远程调试""3":"固件升级中""4":"作业中""5":"待标定"} -->
                    正常
                  </div>
                  <span class="air-type">机舱电源</span>
                </div>
              </div>
              <div class="air-del">
                <img class="air-icon" :src="getImageUrl('airport_icon_feijidianliang.png')" alt="" />
                <div class="air-del-content">
                  <div class="air-title">
                    {{ airportData.capacityPercent }}%
                    <span v-if="airportData.state" class="air-title-status">
                      <template v-if="airportData.status == 1">
                        充电中
                      </template>
                      <template v-if="airportData.status == 0">
                        未充电
                      </template>
                    </span>
                  </div>
                  <span class="air-type">无人机电量</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div style="width: calc(43% - 0.5vh); margin:0 0.5vh" class="air-message-item">
        <div class="corner-lb"></div>
        <div class="corner-rb"></div>
        <h3 class="control-management-title">
          机场操作
          <img class="icon" src="../../../../../assets/leftbg10.png" alt="" />
        </h3>
        <div class="air-airport">
          <div style="display: flex; width: 100%; height: 100%" v-loading="to_fly_loading">
            <div class="cabin-img-box" style="width:40%;">
              <div class="cabin-img item-box">
                <img class="cabin-icon" src="../../../../../assets/yijianqifei.png" @click="to_fly" />
                <div class="cabin-btn" @click="to_fly">一键起飞</div>
              </div>
            </div>
            <!-- <div class="cabin-compass-box" style="width:30%;">
              <div class="cabin-compass item-box">
                <img
                  class="cabin-icon"
                  src="../../../../../assets/instrument.png"
                  alt=""
                />
              </div>
            </div> -->
            <div style="width:60%;display: flex;align-items: center;justify-content: center;">
              <!-- <Form /> -->
              <div class="form_box">
                <ElForm ref="formRef" :model="form" label-width="8vw" style="width: 100%;" :rules="rules"
                  :hide-required-asterisk="true">
                  <ElFormItem label="安全离场高（ALT ）" prop="safeExitAltitude">
                    <ElInput v-model="form.safeExitAltitude" :step="1" style="width: calc(10vw - 2vh)"
                      @input="numberBlur" />
                    <span style="margin-left: 1vh;">m</span>
                  </ElFormItem>
                  <ElFormItem label="飞行作业高（ALT ）" prop="flightOperationAltitude">
                    <ElInput v-model="form.flightOperationAltitude" :step="1" style="width: calc(10vw - 2vh)"
                      @input="numberBlur1" />
                    <span style="margin-left: 1vh;">m</span>
                  </ElFormItem>
                  <ElFormItem label="返航高（ALT ）" prop="returnAltitude">
                    <ElInput v-model="form.returnAltitude" :step="1" style="width: calc(10vw - 2vh)"
                      @input="numberBlur2" />
                    <span style="margin-left: 1vh;">m</span>
                  </ElFormItem>
                  <ElFormItem label="失联动作" prop="missingAction">
                    <ElSelect v-model="form.missingAction" style="width: 10vw">
                      <ElOption :label="'返航'" :value="'2'" />
                    </ElSelect>
                  </ElFormItem>
                </ElForm>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss">
.el-select__popper.el-popper {
  background: #00444A;
}

.el-select__popper.el-popper,
.el-select__popper.el-popper .el-popper__arrow:before {
  border-color: #095d65;
}

.el-popper.is-light,
.el-popper.is-light>.el-popper__arrow:before {
  background: #00444A;
  border-color: #095d65;
}

.el-popper {
  color: #FFFFFF;

  .el-select__selection {
    width: 10vw;
    overflow: auto;

    .el-select__placeholder,
    .el-select__tags-text {
      white-space: normal;
      word-break: break-all;
      max-width: 5vw;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-align: left;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }

  .el-select__popper.el-popper .el-popper__arrow:before {
    border-color: #095d65;
  }

  .el-select-dropdown.is-multiple .el-select-dropdown__item.is-selected:after {
    display: none;
  }

  .el-select-dropdown__item.is-hovering {
    background: #026068;
  }

  .el-select-dropdown__item.is-selected {
    color: #FFFFFF;
  }
}
</style>
<style lang="scss" scoped>
.air-message {
  display: flex;
  height: calc(100%);
  width: 100%;
  // overflow-x: auto;

  .air-message-k {
    width: 100%;
    display: flex;
    height: calc(100% - 1vh);

    .air-message-item {
      background-color: #02292c;
      position: relative;

      // &::before {
      //   content: "";
      //   position: absolute;
      //   top: 0px;
      //   left: 0px;
      //   width: 3vh;
      //   height: 3vh;
      //   border-top: 1px solid #24e5f1;
      //   opacity: 0.4;
      // }

      // &::after {
      //   content: "";
      //   position: absolute;
      //   top: 0px;
      //   right: 0px;
      //   width: 3vh;
      //   height: 3vh;
      //   border-top: 0.01vh solid #24e5f1;
      //   opacity: 0.4;
      // }

      .corner-lb {
        content: "";
        position: absolute;
        bottom: 0px;
        left: 0px;
        width: 3vh;
        height: 3vh;
        border-bottom: 0.01vh solid #24e5f1;
        border-left: 0.01vh solid #24e5f1;
        opacity: 0.4;
      }

      .corner-rb {
        content: "";
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 3vh;
        height: 3vh;
        border-bottom: 0.01vh solid #24e5f1;
        border-right: 0.01vh solid #24e5f1;
        opacity: 0.4;
      }

      .control-management-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 4vh;
        padding-left: 1.5vh;
        margin: 0;
        font-size: 2vh;
        font-style: normal;
        font-weight: 500;
        color: #fffefe;
        text-align: left;
        text-transform: none;
        user-select: none;
        background: radial-gradient(ellipse 140% 300% at 100% 50%,
            #023337 28%,
            #00b8bb 100%);

        .icon {
          width: 3vh;
          margin-right: 1vw;
        }
      }
    }

    .air-weather {
      height: calc(100% - 4vh);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;

      .air-tem {
        font-family: DINAlternate, DINAlternate;
        font-size: 2.8vh;
        font-style: normal;
        font-weight: bold;
        color: #fffefe;
        text-align: center;
        text-transform: none;
      }

      .air-add {
        padding: 0.5vh 1vh;
        font-family: PingFangSC, 'PingFang SC';
        font-size: 1.5vh;
        font-style: normal;
        font-weight: 400;
        color: #fffefe;
      }

      .air-detail {
        width: 100%;
        display: grid;
        padding: 0 0.5vh;
        grid-template-columns: 1fr 1fr;

        .air-del {
          display: flex;
          align-items: center;
          // width: calc(50% - 1vh);
          padding: 1vh 0 1vh 2vh;
          margin: 0.5vh;
          background-color: #0b383b;
          border-radius: 0.5vh;

          // margin-bottom: 10px;
          .air-del-content {
            height: 100%;
            white-space: nowrap;
            display: flex;
            flex-direction: column;
          }

          .air-title {
            margin-bottom: 1vh;
            font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
            font-size: 1.8vh;
            font-style: normal;
            font-weight: bold;
            color: #fffefe;
          }

          .air-type {
            font-size: 1.6vh;
          }
        }

        .air-icon {
          width: 4vh;
          height: 4vh;
          margin-right: 2vh;
        }
      }
    }

    .air-cabin {
      display: flex;
      height: calc(100% - 4vh);

      .air-cabin-left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 30%;
        height: 100%;

        .name {
          font-family: PingFangSC, "PingFang SC";
          font-size: 2vh;
          font-style: normal;
          margin: 1vh 0;
          width: 80%;
          font-weight: 500;
          color: #fffefe;
          text-align: left;
          text-transform: none;
          max-height: 3.5vh;
          display: -webkit-box;
          // -webkit-line-clamp: 2;
          // -webkit-box-orient: vertical;
          // overflow: hidden;
          // text-overflow: ellipsis;
          // white-space: normal;
          // word-break: break-all;
          text-align: center;

          .span {
            width: 100%;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-align: left;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .status {
          padding: 0.5vh 1vh;
          margin: 0.5vh 0;
          font-family: PingFangSC, 'PingFang SC';
          font-size: 1.8vh;
          font-style: normal;
          font-weight: 400;
          color: #fffefe;
          text-align: left;
          text-transform: none;
          background: radial-gradient(ellipse 140% 300% at 100% 50%,
              #02282a 28%,
              #00d591 100%);
          border-radius: 0.5vh;
        }

        .img-box {
          width: 15vh;

          .img {
            width: 100%;
          }
        }

        .address {
          font-family: PingFangSC, 'PingFang SC';
          font-size: 1.8vh;
          font-style: normal;
          font-weight: 400;
          color: #fffefe;
        }
      }

      .air-cabin-right {
        display: flex;
        align-items: center;
        width: 70%;
        height: 100%;

        .air-detail {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          padding: 0 0.5vh;

          .air-del {
            display: flex;
            align-items: center;
            width: calc(50% - 1vh);
            padding: 1vh 0 1vh 2vh;
            height: 8vh;
            margin: 0.5vh;
            background-color: #0b383b;
            border-radius: 0.5vh;
            position: relative;

            // margin-bottom: 10px;
            .air-del-content {
              height: 100%;
              white-space: nowrap;
              display: flex;
              flex-direction: column;
            }

            .air-title {
              margin-bottom: 1vh;
              font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
              font-size: 1.8vh;
              font-style: normal;
              font-weight: bold;
              color: #fffefe;

              .air-title-status {
                margin-left: 1vh;
                font-family: PingFangSC, 'PingFang SC';
                font-size: 1.8vh;
                font-style: normal;
                font-weight: 400;
                color: #00ff42;
                white-space: nowrap;
                position: absolute;
                top: 1vh;
                right: 0.5vh;
              }
            }

            .air-type {
              font-size: 1.5vh;
            }
          }

          .air-icon {
            width: 3vh;
            height: 3vh;
            margin-right: 2vh;
          }
        }
      }
    }

    .air-airport {
      width: 100%;
      height: calc(100% - 4vh);

      .cabin-compass {
        img {
          width: 15vh;
          height: 15vh;
        }
      }

      .item-box {
        background-color: #0b3a3e;
        border-radius: 2vh;
      }

      .cabin-img-box {
        height: 100%;

        .cabin-img {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          height: calc(100% - 4vh);
          padding: 0 2vh;
          margin: 2vh;
          width: calc(100% - 2vh);
          margin-right: 0vh;

          .cabin-icon {
            display: flex;
            width: 13vh;
            height: 13vh;
            margin-bottom: 1vh;
            cursor: pointer;
            user-select: none;
            -webkit-user-drag: none;
            border-radius: 13vh;
            // object-fit: scale-down;
          }

          .cabin-icon:hover {
            box-shadow: 0 0 0.5vh 0 #afafaf;
          }

          .cabin-icon:active {
            box-shadow: 0 0 1vh 0 #FFFFFF;
          }


          .cabin-btn {
            font-family: PingFangSC, 'PingFang SC';
            font-size: 1.8vh;
            font-style: normal;
            font-weight: 500;
            color: #fffefe;
            cursor: pointer;
            user-select: none;
          }
        }
      }

      .cabin-compass-box {
        height: 100%;

        .cabin-compass {
          display: flex;
          align-items: center;
          justify-content: center;
          height: calc(100% - 4vh);
          padding: 0 2vh;
          margin: 2vh 0;

          .cabin-icon {
            // height: 100px;
            width: 100%;
            height: calc(60%);
            user-select: none;
            object-fit: scale-down;
            -webkit-user-drag: none;
          }
        }
      }

      :deep(.el-form-item__content) {
        flex-wrap: nowrap;
      }

      :deep(.el-input.w-full) {
        width: 10vh;
      }

      :deep(.el-select.w-full) {
        width: 12vh;
      }

      :deep(.el-input__wrapper) {
        background: transparent;
      }

      :deep(.el-select__wrapper) {
        background: transparent;
      }

      :deep(.text-sm.font-medium) {
        width: 20vh !important;
      }

      :deep(.pb-6) {
        padding-bottom: 1vh;
      }

      :deep(.grid > .pb-6:nth-child(4)) {
        padding-bottom: 0;
      }

      :deep(.col-span-full.w-full.text-right) {
        display: none;
      }

      :deep(.el-input__inner) {
        color: #ffffff;
      }

      :deep(.el-select__placeholder) {
        color: #ffffff;
      }

      :deep(.el-form-item__label) {
        color: #ffffff;
        white-space: nowrap;
      }

      :deep(.el-form-item):last-child {
        margin-bottom: 0;
      }
    }
  }
}

.form_box {
  // background: #0b3a3e;
  // border-radius: 20px 20px 20px 20px;
  // margin: 0 10px;
  // height: calc(100% - 20px);
  // width: calc(100% - 10px);
  // display: flex;
  // flex-direction: column;
  // justify-content: center;
  // align-items: center;
  // padding-right: 10px;
  background-color: #0b3a3e;
  border-radius: 2vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: calc(100% - 4vh);
  padding: 0 2vh;
  margin: 2vh;
  width: 100%;
}
</style>
